<template>
  <!-- 订单 -->
  <div>
    <div>
      <HeadTail></HeadTail>
    </div>
    <div class="w-full flex">
      <div class="w-1/5 text-xl">
        <div
          class="w-full text-center flex flex-col xl:-ml-[150px] sm:-ml-[70px]"
        >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px]"
            @click="tohome"
            >首页</span
          >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px]"
            @click="tosanscks"
            >分类</span
          >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px]"
            @click="tostore"
            >收藏</span
          >
          <span
            class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl lg:text-lg md:text-base sm:text-xs leading-[10px] text-zinc-500"
            >订单</span
          >
        </div>
      </div>
      <div class="w-3/5 mt-[80px]">
        <div
          v-for="(item, index) in orderData"
          :key="index"
          class="border border-black mb-[38px] 2xl:text-[30px] cursor-pointer"
        >
          <p class="sm:m-1 2xl:ml-[40px] 2xl:mt-[30px] 2xl:mb-[16px]">
            就餐：{{ item.type }}
          </p>
          <div class="flex">
            <div class="w-full mb-4 ml-2">
              <p class="mt-[1%]">商家地址：{{ item.address }}</p>
              <p class="mt-[2%]">订单时间：{{ timestampToTime(item.data) }}</p>
              <p class="mt-[2%] w-full">
                订单编号：{{ item.orderLong }} <span class="ml-[40%]">￥{{ item.price }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import axios from "axios";
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
let orderData = ref([]);
const router = useRouter();
function tohome() {
  router.push("Nhome");
}
function tostore() {
  router.push("StoreUp");
}
function tosanscks() {
  router.push("SanscksPane");
}
let orderLong = ref();
let vendorId = ref();
onMounted(() => {
  orderLong.value = localStorage.getItem("orderlong");
  axios
    .get(`http://1.14.126.98:8081/order/all`, {
      params: {
        orderLong: orderLong.value,
      },
    })
    .then((res) => {
      orderData.value.push(res.data);
      vendorId.value = res.data.vendorId;
      console.log(orderData.value);
      axios
        .post(`http://1.14.126.98:8081/vendor/vendoradd?id=${vendorId.value}`)
        .then((res) => {
          console.log(res.data.data);
        });
    });
});
function timestampToTime(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  const hour = ("0" + date.getHours()).slice(-2);
  const minute = ("0" + date.getMinutes()).slice(-2);
  const second = ("0" + date.getSeconds()).slice(-2);
  const timeStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  return timeStr;
}
</script>
